<template>
	<view class="container">
		<uni-nav-bar :title="'员工管理'" fixed statusBar :border="false" height="88rpx" left-icon="left" @clickLeft="onClickLeft" right-icon="personadd"
			@clickRight="()=>{$navTo('./addUser');newPage='add'}"></uni-nav-bar>
		<scroll-view :style="{height:`calc(100vh - 88rpx - ${statusBarHeight}px)`}" style="overflow: hidden;" scroll-y enhanced :show-scrollbar="false"
			:scroll-with-animation="true" refresher-enabled @refresherrefresh="pulldownRefresh" :refresher-triggered="refreshStatus" @touchmove.stop
			@scrolltolower="scrolltolower">
			<view class="content">
				<view class="item" v-for="(item,index) in goodsList" :key="item.id">
					<view class="title" style="width: 100%">{{item.employeeName}}<uni-tag style="margin: 0 8rpx;" :text="it.roleName" type="primary" size="mini"
							v-for="it in item.roleList" :key="it.id" /></view>
					<view class="name" style="width: 100%;">账号：{{ item.userName }}</view>
					<view class="time" style="width: 65%;">
						{{ item.createTime | parseTime('YYYY-MM-DD HH:mm:ss') }}
					</view>
					<view class="btn-list" style="width: 35%;">
						<uni-icons type="compose" size="28" color="#2979ff" style="margin-right: 25rpx;" @click="toEdit(item)" v-if="!item.isAdmin"></uni-icons>
						<uni-icons type="trash" size="28" color="#f54343" style="margin-right: 25rpx;" @click="delUser(item)" v-if="!item.isAdmin"></uni-icons>
						<view class="pic" @click="resetPassword(item)" v-if="!item.isAdmin">
							<image src="/static/my/reset.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<uni-load-more :status="loading" v-if="goodsList.length > 0"></uni-load-more>
			</view>
			<view style="width: 100%;height: 100%;background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;"
				v-if="goodsList.length == 0">
				<image src="/static/index/nonedata.png" mode="aspectFill" style="width: 400rpx;height: 400rpx;"></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { reqUserList, reqDelUser,reqResetPassWord } from '@/apis/user';
	export default {
		name: "UserManager",
		data() {
			return {
				goodsList: [],
				loading: 'loading',
				page: {
					pageNum: 1,
					pageSize: 15,
					total: 0
				},
				newPage: 'detail',
				refreshStatus: false
			}
		},
		onLoad() {
			this.getOrderList();
		},
		onShow() {
			if (this.newPage == 'edit' || this.newPage == 'add') {
				this.goodsList = [];
				this.loading = 'loading';
				this.page = {
					pageNum: 1,
					pageSize: 15
				}
				this.getOrderList()
			}
			this.newPage = 'detail'
		},
		methods: {
			toEdit(item) {
				let userInfo = {
					id: item.id,
					userName: item.userName,
					employeeName: item.employeeName,
					roleList: item.roleList.map(item => item.id)
				};
				this.$navTo('./editUser', { userInfo: JSON.stringify(userInfo) });
				this.newPage = 'edit';
			},
			pulldownRefresh() {
				this.loading = 'loading';
				this.refreshStatus = true;
				this.page = {
					pageNum: 1,
					pageSize: 15,
					total: 0
				}
				this.goodsList = [];
				this.getOrderList();
			},
			scrolltolower() {
				console.log('触底');
				if (this.loading == "noMore") {
					return;
				}
				this.page.pageNum++;
				this.loading = "loading";
				this.getOrderList();
			},
			async getOrderList() {
				let { page: { pageNum, pageSize } } = this;
				let res = await reqUserList({ pageNum, pageSize });
				if (res.code === 200) {
					const data = res.data;
					let arr = [...this.goodsList, ...data.list];
					const map = new Map();
					const newArr = arr.filter(v => !map.has(v.id) && map.set(v.id, v));
					this.goodsList = newArr;
					this.goodsList.forEach(item => {
						let isAdmin = false;
						isAdmin = item.roleList.some(it => it.roleCode == 'screen' || it.roleCode == 'boss');
						item.isAdmin = isAdmin;
					})
					if (res.data.isLastPage) {
						this.loading = "noMore";
					}
					this.refreshStatus = false;
				}
			},
			delUser(item) {
				let { id } = item;
				uni.showModal({
					content: '是否删除该员工?',
					success: async (res) => {
						if (res.confirm) {
							let suc = await reqDelUser({ id })
							if (suc.code === 200) {
								this.loading = 'loading';
								this.page = {
									pageNum: 1,
									pageSize: 15,
									total: 0
								}
								this.goodsList = [];
								this.getOrderList();
								uni.utils.toast('删除成功', 'success');
							}
						} else if (res.cancel) {
							console.log('取消');
						}
					}
				})
			},
			resetPassword(item){
				let { id } = item;
				uni.showModal({
					content: "该用户密码将被重置为'123456'是否继续？",
					success: async (res) => {
						if (res.confirm) {
							let suc = await reqResetPassWord({ id })
							if (suc.code === 200) {
								uni.utils.toast('重置成功', 'success');
							}
						} else if (res.cancel) {
							console.log('取消');
						}
					}
				})
			}
		},
	}
</script>
<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.content {
		box-sizing: border-box;
		padding: 20rpx;

		.item {
			width: 100%;
			padding: 20rpx;
			height: 180rpx;
			border-radius: 8rpx;
			box-sizing: border-box;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			align-content: space-between;
			font-size: $uni-font-size-unBase;
			margin-bottom: 20rpx;
			&:nth-last-child(2) {
				margin-bottom: 0;
			}
			view {
				height: 50rpx;
				line-height: 50rpx;
			}

			.time {
				font-size: $uni-font-size-small;
			}

			// align-items: center;
			.btn-list {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.pic {
					width: 22px;
					height: 22px;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>